<script>
export default {
  data() {
    return {
      loginInfo: {
        avatar:'',
        tableData: [],
        countData: [],
      },
    }
  },
  methods:{

  },
  mounted() {
    let loginInfoString = localStorage.getItem('loginInfo');
    this.loginInfo = JSON.parse(loginInfoString);

  }
}
</script>

<template>
<div>
  <el-row>
    <el-col :span="8">
      <el-card class="box-card" style="height:285px;margin-bottom: 20px">
        <div class="user">
          <el-avatar class="img" shape="circle" :size="150" :src="loginInfo.avatar"></el-avatar>
          <div class="user-info">
            <div class="name">{{loginInfo.nickname}}</div>
            <div class="access">超级管理员</div>
          </div>
        </div>
      </el-card>
        <el-card class="box-card" style="height: 479px">
          <el-table
              :data="tableData"
              stripe
              style="width: 100%">
            <el-table-column
                prop="name" label="课程"
            ></el-table-column>
            <el-table-column
                prop="todayBuy" label="今日购买"
            ></el-table-column>
            <el-table-column
                prop="monthBuy" label="本月购买"
            ></el-table-column>
            <el-table-column
                prop="totalBuy" label="总购买"
            ></el-table-column>
          </el-table>
      </el-card>
    </el-col>
    <el-col :span="16">
<!--      <div class="num">-->
<!--        <el-card class="box-card">-->
<!--        </el-card>-->
<!--      </div>-->
<!--      <el-card class="box-card">-->
<!--      </el-card>-->
      <div class="graph" style="margin-left: 30px">
        <el-card class="box-card" style="width: 200px">
          <i class="el-icon-s-goods"></i>
          <p>今日支付订单</p>
          <p>1234</p>
        </el-card>
        <el-card class="box-card" style="width: 200px">
          <i class="el-icon-s-goods"></i>
          <p>今日收藏</p>
          <p>12</p>
        </el-card>
        <el-card class="box-card" style="width: 200px">
          <i class="el-icon-s-goods"></i>
          <p>未支付</p>
          <p>12</p>
        </el-card>
      </div>
    </el-col>
  </el-row>
</div>
</template>

<style scoped>
.user{
  display: flex;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
}
.img{
  margin-right:40px;
}
.user-info{
  padding: 35px 20px 20px 20px;
}
.name{
  font-size: 32px;
  margin-bottom: 10px;
}
.access{
  color: #999;
}
</style>